<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>细节</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/user/css/common.css">
</head>
<body>
  <div class="container">
    <header class="bar bar-nav header">
      <a class="button button-link button-nav pull-left back" href="${pageContext.request.contextPath }/user/01/home.jsp">
        <span class="icon icon-left"></span>返回
      </a>
      <h1 class='title'>详情</h1>
    </header>
    <!-- 中间，记录显示 -->
    <div class="mainContent" id="scrollDiv">
      <form class="list-block" style="margin-top: 20px;">
        <input type="text" class="aid" value="${articleDetail.aid}" style="display:none;">
        <input type="text" class="whatFlag" value="${articleDetail.whatFlag}" style="display:none;">
        <input type="text" class="foundFlag" value="${articleDetail.foundFlag}" style="display:none;">
        <ul>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">标题</div>
                <div class="item-input">
                  <input type="text" value="${articleDetail.title }" readonly>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">发布者</div>
                <div class="item-input">
                  <input type="text" value="${articleDetail.username }" readonly>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">失物类别</div>
                <div class="item-input">
                  <input type="text" value="${articleDetail.cname }" readonly>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">发布类型</div>
                <div class="item-input">
                  <c:if test="${articleDetail.whatFlag == 0 }">
	                  <input type="text" value="寻找失主" readonly>
                  </c:if>
                  <c:if test="${articleDetail.whatFlag == 1 }">
                    <input type="text" value="寻找失物" readonly>
                  </c:if>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">失物细节</div>
                <div class="item-input">
                  <textarea readonly>${articleDetail.detailinfo }</textarea>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">照片</div>
                <div class="item-input">
                  <img src="/LostAndFound/images${articleDetail.image}" style="width: 360px;height: 210px;">
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner" style="border-bottom: 0.5px solid #E7E7E7;margin-bottom: 5px;">
                <div class="label">联系方式</div>
                <div class="item-input text-center">
                  <!-- 只有登陆才能查看 -->
                  <c:if test="${not empty user}">
                    <input type="text" value="${articleDetail.phone}" readonly>
                  </c:if>
                  <c:if test="${empty user }">
                    <a href="../login.jsp" style="color:#000;"><i>登陆查看哦</i></a>
                  </c:if>
                </div>
              </div>
            </div>
          </li>
        </ul>
        
        <div class="allInfomationDiv">
	        <!-- 寻找失物的提示信息 -->
	        <div class="text-center forSearchLoseInfo" style="color:#00B0BD;display:none;padding:10px;">
	          <span>如果您捡到失主的宝贝，麻烦打个电话通知一下吧。</span><br>
	          <span>感谢暖心人，校园因您而骄傲！</span>
	        </div>
	        <!-- 寻找失主的提示信息 -->
	        <div class="text-center forSearchLoserInfo" style="color:#00B0BD;display:none;padding:10px;">
	          <span>如果这是您的失物，记得打个电话感谢一下哦。</span><br>
	          <span>祝您尽快领回失物！</span>
	        </div>
          <div class="text-center forSearchSuccessfully" style="color:#00B0BD;display:none;padding:10px;">
            <span>恭喜失主顺利找回心爱之物！</span><br>
            <span>感谢暖心人，校园因您而骄傲！</span>
          </div>
        </div>      
      </form>
				<div class="onfirmModal" style="display:none;">
					<div class="modal-overlay modal-overlay-visible" style="height:100%;width: 571px;margin:auto;top:0;left:0;right:0;bottom:0;"></div>
					<div class="modal modal-in" style="display: block; margin-top: -57px;">
					  <div class="modal-inner">
					  <div class="modal-text"></div>
					  </div>
					  <div class="modal-buttons ">
					  <span class="modal-button cancelBtn">取消</span>
					  <span class="modal-button modal-button-bold confirmBtn">确定</span>
					  </div>
					</div>
				</div>
    </div><!-- end of .mainContent -->
  </div> <!-- end of .container -->

  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/zepto.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.js' charset='utf-8'></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js" charset="utf-8"></script>
  <script type="text/javascript">
    $(function(){
    	// 寻找失物还是寻找失主的提醒信息
    	const whatFlag = $('.whatFlag').val();
    	const foundFlag = $('.foundFlag').val();
    	if(whatFlag == '0' && foundFlag == '1'){
    		$('.forSearchLoserInfo').css('display','block')
    	}else if(whatFlag == '1' && foundFlag == '1'){
    		$('.forSearchLoseInfo').css('display','block')    		
    	}else{
    		$('.forSearchSuccessfully').css('display','block')    		    		
    	}
    	// 
    });
  </script>
</body>
</html>